<template>
  <div class="container">
    <div class="swiper">

      <img key="1" v-show="showList[0]" src="./assets/01.png" alt="">
      <img key="2" v-show="showList[1]" src="./assets/02.png" alt="">
      <img key="3" v-show="showList[2]" src="./assets/03.png" alt="">
      <img key="4" v-show="showList[3]" src="./assets/04.png" alt="">
      <img key="5" v-show="showList[4]" src="./assets/05.png" alt="">

      <div class="dot">
        <span :class="index === 0 && 'active'" @click="onDotClick(0)"></span>
        <span :class="index === 1 && 'active'" @click="onDotClick(1)"></span>
        <span :class="index === 2 && 'active'" @click="onDotClick(2)"></span>
        <span :class="index === 3 && 'active'" @click="onDotClick(3)"></span>
        <span :class="index === 4 && 'active'" @click="onDotClick(4)"></span>
      </div>

      <button class="left" @click="onPreClick"></button>
      <button class="right" @click="onNextClick"></button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    index: 0,
    showList: [
      true,
      false,
      false,
      false,
      false,
    ],
    len: 5,
  }),

  methods: {

    onNextClick() {
      this.index = this.index + 1 === this.len ? 0 : this.index + 1
      const temp = Array(this.len).fill(false)
      temp[this.index] = true
      this.showList = temp
    },

    onPreClick() {
      this.index = this.index - 1 === -1 ? this.len - 1 : this.index - 1
      const temp = Array(this.len).fill(false)
      temp[this.index] = true
      this.showList = temp
    },

    onDotClick(i) {
      this.index = i;
      const temp = Array(this.len).fill(false)
      temp[this.index] = true
      this.showList = temp
    }
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  text-align: center;
  width: 600px;
}
.swiper {
  position: relative;
}
.swiper .dot {
  position: absolute;
}
.swiper .left,
.swiper .right
{
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 40px;
  height: 60px;
  cursor: pointer;
  border: none;
}
.swiper .left {
  left: 0;
  background: url(./assets/arrow-lift.png) no-repeat center / cover;
}
.swiper .right {
  right: 0;
  background: url(./assets/arrow-right.png) no-repeat center / cover;
}
.swiper .dot {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.dot span {
  display: block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin: 3px;
  cursor: pointer;
}
.dot .active {
  background-color: orange;
}
</style>
